Angular Material এর MatInput কম্পোনেন্ট হল একটি উন্নত, স্টাইলড ইনপুট ফিল্ড যা Material Design গাইডলাইন অনুসরণ করে। এটি ইউজার ইন্টারফেসে ইনপুট সংগ্রহের জন্য ব্যবহার করা হয় এবং অ্যাঙ্গুলার অ্যাপ্লিকেশনের ইনপুট ফিল্ডের জন্য আধুনিক, রেসপন্সিভ, এবং কাস্টমাইজযোগ্য সমাধান প্রদান করে।

MatInput কম্পোনেন্ট ব্যবহার করা

Angular Material এ ইনপুট ফিল্ড তৈরি করতে MatInput কম্পোনেন্ট ব্যবহার করা হয়। এটি সাধারণত mat-form-field কম্পোনেন্টের মধ্যে থাকে এবং এতে লেবেল, প্লেসহোল্ডার, এবং ইনপুট ধরনের অন্যান্য বৈশিষ্ট্য সংযুক্ত করা যায়।

১. MatInput কম্পোনেন্ট ব্যবহার করার জন্য প্রয়োজনীয় ধাপ

1. MatInput মডিউল ইমপোর্ট করা

প্রথমে MatInputModule আপনার অ্যাপ্লিকেশনে ইমপোর্ট করতে হবে। এটি app.module.ts ফাইলে করা হয়।

import { MatInputModule } from '@angular/material/input';
import { MatFormFieldModule } from '@angular/material/form-field';

@NgModule({
  imports: [
    MatInputModule,
    MatFormFieldModule
  ]
})
export class AppModule { }

2. MatInput কম্পোনেন্ট ব্যবহার করা

এখন HTML ফাইলে mat-form-field এর মধ্যে matInput ডিরেকটিভ ব্যবহার করে ইনপুট ফিল্ড তৈরি করা যাবে।

<mat-form-field appearance="fill">
  <mat-label>Username</mat-label>
  <input matInput placeholder="Enter your username">
</mat-form-field>

এখানে:

• mat-form-field: এটি Material Design এর ইনপুট ফিল্ড কন্টেইনার।
• matInput: এটি ইনপুট ফিল্ডে Material Design স্টাইল অ্যাপ্লাই করে।
• mat-label: ইনপুট ফিল্ডের জন্য লেবেল।
• placeholder: ইনপুট ফিল্ডে প্লেসহোল্ডার টেক্সট।

ইনপুট বৈশিষ্ট্য

১. টেক্সট ইনপুট

টেক্সট ইনপুট সাধারণত ব্যবহার করা হয় ব্যবহারকারীর কাছ থেকে টেক্সট ইনপুট নেওয়ার জন্য।

<mat-form-field appearance="fill">
  <mat-label>Full Name</mat-label>
  <input matInput placeholder="Enter your full name">
</mat-form-field>

২. পাসওয়ার্ড ইনপুট

পাসওয়ার্ড ইনপুট তৈরি করতে type="password" ব্যবহার করতে হবে।

<mat-form-field appearance="fill">
  <mat-label>Password</mat-label>
  <input matInput placeholder="Enter your password" type="password">
</mat-form-field>

৩. নম্বর ইনপুট

নম্বর ইনপুটের জন্য type="number" ব্যবহার করতে হবে।

<mat-form-field appearance="fill">
  <mat-label>Age</mat-label>
  <input matInput placeholder="Enter your age" type="number">
</mat-form-field>

৪. ইমেইল ইনপুট

ইমেইল ইনপুটের জন্য type="email" ব্যবহার করা হয়, যা ইমেইল ফর্ম্যাট ভ্যালিডেশন করে।

<mat-form-field appearance="fill">
  <mat-label>Email</mat-label>
  <input matInput placeholder="Enter your email" type="email">
</mat-form-field>

MatInput এর অন্যান্য বৈশিষ্ট্য

১. Validation (ভ্যালিডেশন)

Angular Material ইনপুট ফিল্ডে ভ্যালিডেশন সহজে করা যায়। Angular Reactive Forms বা Template-driven Forms ব্যবহার করে ইনপুট ফিল্ডে ভ্যালিডেশন প্রয়োগ করা যায়।

<form [formGroup]="form">
  <mat-form-field appearance="fill">
    <mat-label>Email</mat-label>
    <input matInput formControlName="email" required>
    <mat-error *ngIf="form.get('email').hasError('required')">
      Email is required
    </mat-error>
  </mat-form-field>
</form>

এখানে, required ভ্যালিডেশন ব্যবহার করা হয়েছে এবং mat-error ট্যাগ ব্যবহার করে ত্রুটি দেখানো হয়েছে।

২. ডিসএবেল ইনপুট

ইনপুট ফিল্ডকে অক্ষম (disabled) করতে disabled অ্যাট্রিবিউট ব্যবহার করা যায়।

<mat-form-field appearance="fill">
  <mat-label>Username</mat-label>
  <input matInput placeholder="Enter your username" [disabled]="true">
</mat-form-field>

৩. স্মাল ইনপুট (Small Input)

আপনি ইনপুট ফিল্ডের আকার ছোট করতে size="small" ব্যবহার করতে পারেন।

<mat-form-field appearance="fill">
  <mat-label>Country</mat-label>
  <input matInput placeholder="Enter your country" size="small">
</mat-form-field>

৪. ফোকাস এবং ব্লার ইভেন্ট

Angular Material ইনপুট ফিল্ডে focus এবং blur ইভেন্ট হ্যান্ডেল করতে পারেন।

<mat-form-field appearance="fill">
  <mat-label>Username</mat-label>
  <input matInput (focus)="onFocus()" (blur)="onBlur()">
</mat-form-field>

Angular Material এর MatInput কম্পোনেন্ট ব্যবহার করে আপনি সহজেই আধুনিক, রেসপন্সিভ, এবং স্টাইলিশ ইনপুট ফিল্ড তৈরি করতে পারেন। এটি Material Design গাইডলাইন অনুসরণ করে, যা আপনার অ্যাপ্লিকেশনের ইউজার ইন্টারফেসকে আরও সুন্দর এবং ব্যবহারকারীর জন্য উপযোগী করে তোলে। MatInput কম্পোনেন্টে লেবেল, প্লেসহোল্ডার, টাইপ, ভ্যালিডেশন, এবং কাস্টমাইজেশন এর মতো শক্তিশালী বৈশিষ্ট্যগুলি সহজেই ব্যবহার করা যায়।

Angular Material একটি জনপ্রিয় UI লাইব্রেরি যা Material Design প্রিন্সিপল অনুসরণ করে তৈরি, এবং এটি ডেভেলপারদের জন্য আধুনিক, ব্যবহারকারী-বান্ধব ইনপুট ফিল্ডসহ অনেক প্রি-বিল্ট কম্পোনেন্ট সরবরাহ করে। Material Input Field Angular Material এর অন্যতম একটি গুরুত্বপূর্ণ কম্পোনেন্ট যা সহজে কাস্টমাইজ করা যায় এবং বিভিন্ন ফর্মে ব্যবহার করা যায়।

Material Input Field এর সুবিধা

• টাইপোগ্রাফি সাপোর্ট: Material Input ফিল্ডে টাইপোগ্রাফি সাপোর্ট পাওয়া যায়, যা স্বয়ংক্রিয়ভাবে লেবেল এবং পিএলেসহোল্ডার ম্যানেজ করে।
• ফিল্ড ভ্যালিডেশন: এটি ভ্যালিডেশন ফিচার সাপোর্ট করে, যেমন Required, Minlength, Maxlength, Pattern ইত্যাদি।
• অ্যাক্সেসিবিলিটি: ইনপুট ফিল্ড গুলো অ্যাক্সেসিবিলিটির জন্যও উপযুক্ত, যেমন স্ক্রীন রিডার এবং কীবোর্ড নেভিগেশন।

Material Input Field ব্যবহার করা

Material Input ফিল্ড ব্যবহার করতে, আপনাকে Angular Material এর MatInputModule ইমপোর্ট করতে হবে এবং তারপর HTML ফাইলে matInput ডিরেকটিভ ব্যবহার করতে হবে।

১. ইন্সটলেশন এবং মডিউল ইমপোর্ট

প্রথমে Angular Material ইন্সটল করতে হবে:

ng add @angular/material

এটি ইনস্টল করার পরে, আপনার অ্যাপ্লিকেশনের app.module.ts ফাইলে MatInputModule ইমপোর্ট করুন:

import { MatInputModule } from '@angular/material/input';
import { MatFormFieldModule } from '@angular/material/form-field';

@NgModule({
  imports: [
    MatInputModule,
    MatFormFieldModule
  ]
})
export class AppModule { }

MatFormFieldModule ব্যবহার করা হয় যাতে ইনপুট ফিল্ডগুলোকে Material Design স্টাইল অনুসারে প্রদর্শন করা যায়।

২. Material Input Field তৈরি করা

এখন, HTML ফাইলে Material Input ফিল্ড ব্যবহার করতে পারেন। নিচে এর উদাহরণ দেওয়া হলো:

<mat-form-field appearance="fill">
  <mat-label>First Name</mat-label>
  <input matInput placeholder="Enter your first name" [(ngModel)]="firstName">
</mat-form-field>

এখানে:

• mat-form-field: Material Design এর ফর্ম ফিল্ড ব্যবহার করার জন্য।
• mat-label: ইনপুট ফিল্ডের লেবেল।
• matInput: ইনপুট ফিল্ডে Material Input ডিরেকটিভ ব্যবহার করা।
• placeholder: ইনপুট ফিল্ডে প্লেসহোল্ডার টেক্সট।

এছাড়া, appearance="fill" ব্যবহার করে ইনপুট ফিল্ডের স্টাইল কাস্টমাইজ করা হয়।

৩. ভ্যালিডেশন এবং এ্যাট্রিবিউট

Material Input Field সহজেই ভ্যালিডেশন সাপোর্ট করে। আপনি required, minlength, maxlength, এবং pattern এট্রিবিউট ব্যবহার করতে পারেন।

<mat-form-field appearance="fill">
  <mat-label>Email</mat-label>
  <input matInput placeholder="Enter your email" [(ngModel)]="email" required email>
  <mat-error *ngIf="email.invalid && email.touched">
    You must enter a valid email.
  </mat-error>
</mat-form-field>

এখানে:

• required: ইনপুট ফিল্ডটি পূর্ণ হওয়া প্রয়োজন।
• email: ইনপুট ফিল্ডটি ইমেল ফরম্যাটে হওয়া প্রয়োজন।
• mat-error: এটি একটি এরর মেসেজ প্রদর্শন করবে যখন ইনপুট ভ্যালিডেশন ব্যর্থ হয়।

৪. ইনপুট ফিল্ডের স্টাইলিং

Angular Material ইনপুট ফিল্ডের জন্য বিভিন্ন স্টাইলিং পছন্দ সরবরাহ করে, যেমন appearance, floatLabel, এবং color।

• appearance: ইনপুট ফিল্ডের স্টাইল পরিবর্তন করার জন্য।
  • 'legacy': পুরনো ডিজাইন।
  • 'standard': ডিফল্ট ডিজাইন।
  • 'fill': ইনপুট ফিল্ডে ব্যাকগ্রাউন্ড পূর্ণ করতে।
  • 'outline': ইনপুট ফিল্ডের চারপাশে আউটলাইন তৈরি করতে।
• floatLabel: লেবেলটি ইনপুট ফিল্ডে থাকতে অথবা ফ্লোট করতে পারে।
• color: ইনপুট ফিল্ডের রঙ পরিবর্তন করা যায়, যেমন primary, accent, অথবা warn।

<mat-form-field appearance="outline">
  <mat-label>Username</mat-label>
  <input matInput placeholder="Enter username" [(ngModel)]="username">
</mat-form-field>

এখানে, appearance="outline" দ্বারা ইনপুট ফিল্ডের চারপাশে আউটলাইন তৈরি করা হয়েছে।

Material Input Field এর কিছু গুরুত্বপূর্ণ বৈশিষ্ট্য

• নিরাপত্তা: এটি password টাইপের ইনপুটও সমর্থন করে, যেখানে লেখা গোপন থাকে।

<mat-form-field appearance="fill">
  <mat-label>Password</mat-label>
  <input matInput placeholder="Enter your password" type="password" [(ngModel)]="password">
</mat-form-field>

• অটো কমপ্লিট: এটি autocomplete ফিচার সমর্থন করে, যা ইউজারের জন্য দ্রুত ইনপুট করার সুবিধা দেয়।

<mat-form-field appearance="fill">
  <mat-label>Search</mat-label>
  <input matInput placeholder="Search" autocomplete="on">
</mat-form-field>

Angular Material এর Material Input Field ব্যবহার করার মাধ্যমে আপনি একটি আধুনিক, ব্যবহারকারীবান্ধব এবং অ্যাক্সেসিবল ইনপুট ফিল্ড তৈরি করতে পারেন। এটি বিভিন্ন ভ্যালিডেশন, টাইপোগ্রাফি এবং স্টাইলিং সাপোর্ট করে, যা ডেভেলপারদের জন্য কাজটি সহজ করে তোলে। Angular Material এর ইনপুট ফিল্ড গুলো একটি একক, সমন্বিত ডিজাইন সিস্টেমে কাজ করে এবং Material Design গাইডলাইন অনুযায়ী সঠিকভাবে উপস্থাপিত হয়।

Angular Material এর মাধ্যমে ফর্ম তৈরি করা খুবই সহজ এবং একে শক্তিশালী ফর্ম ভ্যালিডেশন ফিচার দিয়ে সম্পন্ন করা যায়। Angular এর Reactive Forms এবং Template-driven Forms ব্যবহারের মাধ্যমে ইনপুট ফিল্ডের ভ্যালিডেশন করা যায়। Angular Material এর MatInputModule কম্পোনেন্ট ব্যবহার করে আপনি সহজেই ফর্ম ইনপুট তৈরি করতে পারেন, এবং এর সাথে বিভিন্ন ধরনের ভ্যালিডেশন যুক্ত করতে পারেন।

এখানে Angular Material ইনপুট ফিল্ডের সাথে ফর্ম ভ্যালিডেশন করার বিভিন্ন ধাপ এবং কৌশল বর্ণনা করা হলো।

১. ইনপুট ফিল্ডের সাথে ফর্ম ভ্যালিডেশন

Angular Material এর MatInputModule ব্যবহার করে ফর্ম ইনপুট তৈরি করা হয়। এই ইনপুট ফিল্ডগুলির সাথে বিভিন্ন ভ্যালিডেশন যেমন Required, MinLength, MaxLength, Pattern Matching ইত্যাদি যুক্ত করা যায়।

উদাহরণ: Template-driven Forms এর মাধ্যমে ইনপুট ফিল্ডের ভ্যালিডেশন

Angular Material ইনপুটের সাথে ভ্যালিডেশন ব্যবহার করতে FormsModule এবং MatInputModule ইনপোর্ট করতে হবে।

১.1. মডিউল ইনপোর্ট করা

import { NgModule } from '@angular/core';
import { MatInputModule } from '@angular/material/input';
import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [MatInputModule, FormsModule],
})
export class AppModule {}

১.2. HTML ফর্ম তৈরি করা

<form #form="ngForm">
  <mat-form-field>
    <mat-label>Name</mat-label>
    <input matInput name="name" [(ngModel)]="name" required minlength="3" #name="ngModel">
    <mat-error *ngIf="name.invalid && (name.dirty || name.touched)">
      Name is required and must be at least 3 characters long.
    </mat-error>
  </mat-form-field>
  
  <mat-form-field>
    <mat-label>Email</mat-label>
    <input matInput name="email" [(ngModel)]="email" required email #email="ngModel">
    <mat-error *ngIf="email.invalid && (email.dirty || email.touched)">
      Please enter a valid email address.
    </mat-error>
  </mat-form-field>

  <button mat-raised-button [disabled]="form.invalid">Submit</button>
</form>

ভ্যালিডেশন ব্যাখ্যা:

• Required: ফিল্ডটি পূর্ণ করতে হবে।
• Minlength: কমপক্ষে ৩টি অক্ষর থাকা উচিত।
• Email: সঠিক ইমেইল ফরম্যাট হওয়া উচিত।

এখানে mat-error ব্যবহার করা হয়েছে, যা ফিল্ডের ভ্যালিডেশন ত্রুটি প্রদর্শন করবে যদি ইনপুটটি অবৈধ হয়।

২. Reactive Forms এর মাধ্যমে ইনপুট ফিল্ডের ভ্যালিডেশন

Reactive Forms ব্যবহার করে আরও শক্তিশালী এবং কাস্টম ভ্যালিডেশন যুক্ত করা যায়। এখানে FormGroup, FormControl এবং Validators ব্যবহার করা হয়।

উদাহরণ: Reactive Forms এর মাধ্যমে ইনপুট ফিল্ডের ভ্যালিডেশন

২.1. মডিউল ইনপোর্ট করা

import { NgModule } from '@angular/core';
import { MatInputModule } from '@angular/material/input';
import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [MatInputModule, ReactiveFormsModule],
})
export class AppModule {}

২.2. TypeScript ফাইল তৈরি করা

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  form: FormGroup;

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      name: ['', [Validators.required, Validators.minLength(3)]],
      email: ['', [Validators.required, Validators.email]],
    });
  }

  get name() { return this.form.get('name'); }
  get email() { return this.form.get('email'); }

  onSubmit() {
    if (this.form.valid) {
      console.log('Form Submitted', this.form.value);
    }
  }
}

২.3. HTML ফর্ম তৈরি করা

<form [formGroup]="form" (ngSubmit)="onSubmit()">
  <mat-form-field>
    <mat-label>Name</mat-label>
    <input matInput formControlName="name">
    <mat-error *ngIf="name.invalid && (name.dirty || name.touched)">
      Name is required and must be at least 3 characters long.
    </mat-error>
  </mat-form-field>

  <mat-form-field>
    <mat-label>Email</mat-label>
    <input matInput formControlName="email">
    <mat-error *ngIf="email.invalid && (email.dirty || email.touched)">
      Please enter a valid email address.
    </mat-error>
  </mat-form-field>

  <button mat-raised-button type="submit" [disabled]="form.invalid">Submit</button>
</form>

ভ্যালিডেশন ব্যাখ্যা:

• Reactive Forms এ FormControl ব্যবহার করে ফিল্ডের ভ্যালিডেশন নির্ধারণ করা হয়।
• Validators এর মাধ্যমে বিভিন্ন ভ্যালিডেশন শর্ত যেমন required, minlength, email ইত্যাদি দেওয়া হয়।

এখানে mat-error ব্যবহার করা হয়েছে, যা ইনপুটের ভুল বা অবৈধ স্টেট শনাক্ত করলে ত্রুটি বার্তা প্রদর্শন করে।

৩. কাস্টম ভ্যালিডেশন

Angular Material এর সাথে কাস্টম ভ্যালিডেশনও ব্যবহার করা যেতে পারে, যেমন ফিল্ডের মানের উপর ভিত্তি করে ডাইনামিক ভ্যালিডেশন তৈরি করা।

উদাহরণ: কাস্টম ভ্যালিডেটর তৈরি

import { AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms';

export function customValidator(): ValidatorFn {
  return (control: AbstractControl): ValidationErrors | null => {
    const forbidden = /admin/.test(control.value);
    return forbidden ? { 'forbiddenName': { value: control.value } } : null;
  };
}

এখন এই কাস্টম ভ্যালিডেটরটি ইনপুট ফিল্ডে ব্যবহার করতে পারেন:

this.form = this.fb.group({
  username: ['', [Validators.required, customValidator()]]
});

Angular Material এর মাধ্যমে ইনপুট ফিল্ডের সাথে ফর্ম ভ্যালিডেশন করা খুবই সহজ এবং কার্যকরী। আপনি Template-driven Forms অথবা Reactive Forms ব্যবহার করে ফর্মের ভ্যালিডেশন করতে পারেন। Angular এর বিল্ট-ইন Validators এর পাশাপাশি কাস্টম ভ্যালিডেটর ব্যবহার করে আরও উন্নত ফর্ম ভ্যালিডেশন তৈরি করা সম্ভব। Angular Material এর কম্পোনেন্ট যেমন MatInputModule, MatFormFieldModule, এবং MatErrorModule এর মাধ্যমে ফর্মকে আকর্ষণীয় এবং ব্যবহারকারী-বান্ধব করা যায়।